<template>
    <div class="box">

        <div class='newCss'>
            'ref'定义的样式
        </div>
        <div :class="[xl.name]">
            模块Css
        </div>
        <div class="useCss">
            <div class="sss">
                我是天天
            </div>
        </div>
        <component is="style"> {{ css }}
        </component>
    </div>
</template>

<script lang='ts' setup>

import { ref, reactive, useCssModule } from 'vue';
let color = ref<string>('pink')
// 拿到模块类名
let cssModule = useCssModule('xl')
const css = '.box{.useCss {background-color: red; .sss{color:#41b883}} .newCss{color:#2977fd}}'
console.log('===>', cssModule);
</script>

<style  scoped>
/* :global  定义全局css */
/* :global(div) {
    color: red
} */

/* 插槽类使用 */
:slotted(.a) {
    color: red
}

.newCss {
    color: v-bind(color);
}
</style>
<style module="xl">
.name {
    background-color: #0780d8;
}
</style>